<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, ol, dl, li, dt, dd, p, h1, h2, h3, h4, h5, h6, tr, td, input, textarea {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 1200px;
            height: 500px;
            margin: 100px auto;
            position: relative;
        }

        #ul li {
            position: absolute;
            left: 200px;
            top: 0px;
        }

        #ul img {
            width: 100%;
            height: 100%;

        }

        #span {
            opacity: 0;
        }

        .pre, .next {
            width: 76px;
            height: 112px;
            position: absolute;
            top: 50%;
            z-index: 999;
        }

        .pre {
            background: url("images/prev.png") no-repeat;
            left: 0;
        }

        .next {
            background: url("images/next.png") no-repeat;
            right: 0;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="ul">
        <li><img src="images/slidepic1.jpg" alt=""></li>
        <li><img src="images/slidepic2.jpg" alt=""></li>
        <li><img src="images/slidepic3.jpg" alt=""></li>
        <li><img src="images/slidepic4.jpg" alt=""></li>
        <li><img src="images/slidepic5.jpg" alt=""></li>
    </ul>
    <div id="span">
        <span class="pre"></span>
        <span class="next"></span>
    </div>
</div>
<script src="../base.js"></script>
<script>
    window.onload = function () {
        var box = document.getElementById('box');
        var ulis = document.getElementById('ul');
        var span = document.getElementById('span');
        var pre = document.getElementsByClassName('pre');
        var next = document.getElementsByClassName('next');
        box.onmouseover = function () {
            buffer(span, {opacity: 1})
        };
        box.onmouseout = function () {
            buffer(span, {opacity: 0})
        };
        //设置一个值，让点击换图时等动画结束点击才能起作用
        var flg = true;
        //设置一个数组存放每个li的位置和相应透明度等
        var json = [
            {//数组0
                left: 50,
                top: 20,
                width: 400,
                opacity: 0.2,
                z: 2
            },
            {//数组1
                left: 0,
                top: 80,
                width: 600,
                opacity: 0.8,
                z: 3
            },
            {//数组2
                left: 200,
                top: 120,
                width: 800,
                opacity: 1,
                z: 4
            },
            {//数组3
                left: 600,
                top: 80,
                width: 600,
                opacity: 0.8,
                z: 3
            },
            {//数组4
                left: 750,
                top: 20,
                width: 400,
                opacity: 0.2,
                z: 2
            }
        ];

        //设置li定位函数,遍历每个li，给对应的Li设置相应的位置
        function liIndex() {
            for (var i = 0; i < json.length; i++) {
                var item = json[i];
                //通过动画给每个li定位
                buffer(ulis.children[i], {
                    width: item.width,
                    top: item.top,
                    left: item.left,
                    opacity: item.opacity,
                    zIndex: item.z
                }, function () {
                    flg = true;
                })
            }
        }

        liIndex();
        //点击span让图片滚动
        for (var i = 0; i < span.children.length; i++) {
            var mySpan = span.children[i];
            mySpan.onclick = function () {
                if (flg == true) {//图片能滚动
                    if (this.className == 'pre') {
                        json.push(json.shift());//json.shift()删除并返回数组第一个元素，json.push()向数组尾部添加元素
                        flg = false;
                        liIndex();

                    }
                    if (this.className == 'next') {
                        json.unshift(json.pop());//json.pop()删除并返回数组最后一个元素，json.unshift()向数组开头添加元素
                        flg = false;
                        liIndex();
                    }
                }
            }
        }

    }
</script>
</body>
</html>